<template>
	<div class="cartcontrol">
		<!-- 减少 -->
		<transition name="move">
			<div class="cart-decrease" v-show="food.count>0" @click="decreaseCart" >
				<span class="inner icon-remove_circle_outline"></span>
			</div>
		</transition>	
		<!-- 商品数量： -->
		<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
		<!-- 增加： -->
		<div class="cart-add icon-add_circle" @click="addCart"></div>
	</div>
</template>

<script>
// 引用全局VUE中的接口
import Vue from 'vue';
export default {

  name: 'cartcontrol',
  props:{
  	food:{
  		type:Object
  	}
  },
  mounted(){
  	// console.log(this.food)
  },
  data () {
    return {

    }
  },
  methods:{
  	addCart(){
  		if(!this.food.count){
  			// this.food.count+=1;给数据新增字段
  			Vue.set(this.food,'count',1);
  		}else{
  			this.food.count++;
  		}
  		// 点击时候派发一个事件,提交'cart-add'事情给父组件，第二个是要传递的参数  ($emit, $on, $off 分别来分发、监听、取消监听事件,)
  		this.$emit('cart-add',event.target);
  	},
  	decreaseCart(){
  		if(this.food.count){
  			this.food.count--;
  		}
  	}
  }
}
</script>

<style lang="less" scoped>
@import "../../common/less/index.less";
.cartcontrol{
	font-size: 0;
	.cart-decrease{
		display:inline-block;
		padding:6px;
		transition:all 0.4s linear;
		transform:translate3D(0,0,0);
	    .inner{
	    	display:inline-block;
	    	line-height:24px;
			font-size: 24px;
			color:rgba(0,160,220);
			transform:rotate(0);
			transition:all 0.4s linear;
	    }
		&.move-enter,&.move-leave-to{
			opacity:0;
			transform:translate3D(24px,0,0);
			.inner{
				transform:rotate(180deg);
			}
		}	    
	}
	.cart-count{
		display:inline-block;
		font-size: 10px;
		vertical-align:top;
		width:12px;
		padding-top: 6px;
		color:#93999f;
		line-height:24px;
		text-align: center;
	}
	.cart-add{
		display:inline-block;
		padding:6px;
		line-height:24px;
		font-size: 24px;
		color:rgba(0,160,220)
	}
}
</style>